Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
JS-Switch für eine Eigenschaft
Autor: manya
Datum: 25.08.2010 17:29:52
Hallo,
Wenn der User ein großes Browserfenster hat, möchte ich eine größere Zeilenhöhe vergeben. Ich weiß, daß das ein ganz simples Problem ist, trotzdem komme ich nicht weiter.
Könnt Ihr mir bitte sagen, wo mein Fehler ist?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box {
border: 2px solid red;
line-height: 100%;
}
<script src="inner.js" type="text/javascript"></script>
</style>
</head>
<body>
<div class="box">
Weit hinten, hinter den Wortbergen, fernab der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in dem schönen Städtchen Buchstabhausen an der Küste des Semantik, eines grossen Sprachozeans. Ein kleines Bächlein namens Duden fliesst durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloss eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.
</div>
</body>
</html>
Die Datei "inner.js" sieht so aus:
function switch_css()
{
if (window.innerHeight > 400 || document.documentElement.clientHeight > 400)
document.write(' .box { line-height: 200%; } ');
}
Vielen Dank für Tipps
Gruß
manya
Re: JS-Switch für eine Eigenschaft
Autor: T.Jung
Datum: 25.08.2010 19:01:31
> Wenn der User ein großes Browserfenster hat,
> möchte ich eine größere Zeilenhöhe vergeben. Ich
> weiß, daß das ein ganz simples Problem ist,
> trotzdem komme ich nicht weiter.
> Könnt Ihr mir bitte sagen, wo mein Fehler ist?
Ich glaub gar nicht (habs jetzt aber nicht nachgeprüft), dass ein Script innerhalb eines <style>-Abschnitts erlaubt ist...
Eine mögliche Lösung sieht etwa so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled1</title>
<style type="text/css">
.box
{
border: 2px solid red;
line-height: 100%;
}
</style>
<script type="text/javascript">
function increaseLineHeight(id)
{
if (window.innerHeight > 400 || document.documentElement.clientHeight > 400)
{
document.getElementById(id).style.lineHeight = '200%';
}
}
</script>
</head>
<body onload="increaseLineHeight('box')">
<div id="box">
Weit hinten, hinter den Wortbergen (...)
</div>
</body>
</html>
Achtung:
- Ich habe hier id="box" anstelle von class="box" genommen, weil es keine JS-Funktion wie getElementsByClass() gibt. Die kann man sich ggf. aber selbst bauen, siehe:
http://www.anyexample.com/webdev/javascript/javascript_getelementsbyclass_function.xml
- Das Script wird natürlich nur beim Laden der Seite ausgeführt. Wenn jemand _nachträglich_ die Browserfenstergröße ändert, ändert sich der Zeilenabstand _nicht_! Dafür muss man dann schon den Reload-Button betätigen.
HTH,
Tobias Jung
Re: JS-Switch für eine Eigenschaft
Autor: manya
Datum: 25.08.2010 20:11:48
> Ich glaub gar nicht (habs jetzt aber nicht
> nachgeprüft), dass ein Script innerhalb eines
> <style>-Abschnitts erlaubt ist...
>
> Eine mögliche Lösung sieht etwa so aus:
> <style type="text/css">
> .box
> {
> border: 2px solid red;
> line-height: 100%;
> }
> </style>
>
> <script type="text/javascript">
> function increaseLineHeight(id)
> {
> if (window.innerHeight > 400 || document.documentElement.clientHeight > 400)
> {
> document.getElementById(id).style.lineHeight = '200%';
> }
> }
> </script>
> </head>
>
> <body onload="increaseLineHeight('box')">
Danke Tobias, das funktoniert genauso, wie ich es haben möchte. :-))
Ich bin ja noch ein ziemliches JavaScript-Greenhorn, aber ich hätte jetzt gedacht, daß in die Klammer bei "document.getElementById(id)" der Name der ID gehört, in meinem Fall also "box", und bei "function" in die Klammer auch nochmal "box".
Aber es scheint wirklich egal zu sein. :-o
Wenn ich "blubb" da hineinsetze, funktioniert es ebenfalls. ;-) :-o
> Achtung:
> - Ich habe hier id="box" anstelle von class="box" genommen,
Danke für den Hinweis, habe es gleich bemerkt. ;-)
> weil es keine JS-Funktion wie
> getElementsByClass() gibt.
Es gibt getElementByClassName, aber leider verstehen das noch nicht alle Browser.
Gruß
manya
Re: JS-Switch für eine Eigenschaft
Autor: T.Jung
Datum: 26.08.2010 14:02:26
> Danke Tobias, das funktoniert genauso, wie ich es
> haben möchte. :-))
Gern geschehen.
> Ich bin ja noch ein ziemliches
> JavaScript-Greenhorn, aber ich hätte jetzt
> gedacht, daß in die Klammer bei
> "document.getElementById(id)" der Name der ID
> gehört, in meinem Fall also "box", und bei
> "function" in die Klammer auch nochmal "box".
Ja, sie gehört auch dahin, damit die JavaScript-Funktion auch »weiß«, bei _welcher_ ID sie nun den Zeilenabstand erhöhen soll.
Aber: Damit die Funktion nicht für jede ID, die u.U. irgendwann mal so behandelt werden soll, umgeschrieben werden muss, wird sie als Variable der Funktion übergeben.
Deshalb steht die ID im _Aufruf_ der Funktion:
<body onload="increaseLineHeight('box')">
Die Definition der Funktion:
function increaseLineHeight(id)
... bedeutet: Behandle das, was Dir übergeben wird, als Variable 'id'.
Ich hätte auch schreiben können:
function increaseLineHeight(blablubb)
{
(...)
document.getElementById(blablubb).style.lineHeight = '200%';
(...)
}
Wäre insofern sogar geschickter gewesen, weil so klarer wird, dass »blablubb« wirklich nur eine _Variable_ ist und kein festes Schlüsselwort.
> Aber es scheint wirklich egal zu sein. :-o
> Wenn ich "blubb" da hineinsetze, funktioniert es
> ebenfalls. ;-) :-o
Richtig, so lange Du im Aufruf der Funktion die ID reinschreibst, die Du auch im HTML-Code verwendest, ist es völlig egal, wie sie heißt.
Gruß,
Tobias
Re: JS-Switch für eine Eigenschaft
Autor: manya
Datum: 26.08.2010 19:12:41
> > Ich bin ja noch ein ziemliches
> > JavaScript-Greenhorn, aber ich hätte jetzt
> > gedacht, daß in die Klammer bei
> > "document.getElementById(id)" der Name der ID
> > gehört, in meinem Fall also "box", und bei
> > "function" in die Klammer auch nochmal "box".
>
> Ja, sie gehört auch dahin, damit die
> JavaScript-Funktion auch »weiß«, bei _welcher_ ID
> sie nun den Zeilenabstand erhöhen soll.
Prima, jetzt ist mein Weltbild wieder in Ordnung. ;-)
> ... Wäre insofern sogar geschickter gewesen, weil so
> klarer wird, dass »blablubb« wirklich nur eine
> _Variable_ ist und kein festes Schlüsselwort.
Für Anfänger wie mich ist es tatsächlich mit deutschen Namen für Variablen und Funktionen verständlicher.
> Aber: Damit die Funktion nicht für jede ID, die
> u.U. irgendwann mal so behandelt werden soll,
> umgeschrieben werden muss, wird sie als Variable
> der Funktion übergeben.
sehr vorausschauend!
Danke für Deine Erklärungen! :-)
Ich habe nämlich tatsächlich mehrere Boxen, deren Zeilenhöhe verändert werden soll.
Da man eine ID ja nur _einmal_ vergeben kann, habe ich also den Boxen verschiedene IDs zugeordnet, und diese IDs dann im Aufruf der Funktion bei <body onload ... angegeben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled1</title>
<style type="text/css">
.box
{
border: 2px solid red;
line-height: 100%;
}
</style>
<script type="text/javascript">
function zeilenhoehe(blubb)
{
if (window.innerHeight > 400 || document.documentElement.clientHeight > 400)
{
document.getElementById(blubb).style.lineHeight = '600%';
}
}
</script>
</head>
<body onload="zeilenhoehe('box_1', 'box_2')">
<div id="box_1">
Weit hinten, hinter den Wortbergen, fernab der Länder Vokalien
und Konsonantien leben die Blindtexte. Abgeschieden wohnen
Sie in dem schönen Städtchen Buchstabhausen an der Küste des
Semantik, eines grossen Sprachozeans.
</div>
<br>
<br>
<div id="box_2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras porttitor. Ut nonummy vestibulum arcu. Nulla eros eros,
mattis et, dictum quis, convallis vel, mauris.
Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo.
</div>
</body>
</html>
Leider funktioniert das so nur für die erste Box. :-(
Und wenn ich statt der IDs, beiden Boxen den KLASSENnnamen "box" gebe,
und <body onload="zeilenhoehe('box')">
und in der Funktion "document.getElementByClassName"
schreibe, funktioniert es auch nicht.
Man könnte jetzt zwar, wenn man wieder ID statt Class nimmt, bei 'body onload' mehrere Funktionen aufrufen, und jeder eine Box-ID mitgeben, aber das ist ja auch nicht Sinn der Sache, für jede Box nun eine eigene Funktion zu schreiben, die im Grund das Gleiche macht, wie die übrigen Funktionen.
Gibt es für dieses Problem noch eine schlaue Lösung?
Gruß
manya
Re: JS-Switch für eine Eigenschaft
Autor: T.Jung
Datum: 26.08.2010 19:36:09
> Ich habe nämlich tatsächlich mehrere Boxen, deren
> Zeilenhöhe verändert werden soll.
> Da man eine ID ja nur _einmal_ vergeben kann,
> habe ich also den Boxen verschiedene IDs
> zugeordnet, und diese IDs dann im Aufruf der
> Funktion bei <body onload ...
> angegeben:
> (...)
> <body onload="zeilenhoehe('box_1', 'box_2')">
Nein, so kann das auch nicht funktionieren:
In diesem Fall übergibst Du der Funktion _zwei_ Parameter, und die erwartet nunmal nur _einen_.
Die »quick & dirty«-Lösung besteht darin, die Funktion mehrfach aufzurufen (weiterhin mit der ID):
<body onload="zeilenhoehe('box_1'); zeilenhoehe('box_2'); zeilenhoehe('box_3');">
Das ist natürlich unelegant -- erst recht, wenn Du zig Boxen hast; da wäre die Verwendung einer Klasse besser.
Guck Dir nochmal die Seite an, die ich in meinem ersten Posting verlinkt habe:
Dort gibt es die (lt. Aussage des Autors recht browserkompatible) Funktion getElementsByClass(), die Du auch in den Script-Abschnitt der Website einfügen musst. Außerdem hat er die Funktion showtab() -- Deine Funktion zeilenhoehe() müsstest Du dann entsprechend aufbauen.
Leider fehlt mir momentan die Zeit, ein funktionierendes Beispiel zusammenzukloppen -- versuch's selbst mal... :-)
Viel Erfolg!
Tobias
Re: JS-Switch für eine Eigenschaft
Autor: manya
Datum: 27.08.2010 02:15:07
> > <body onload="zeilenhoehe('box_1', 'box_2')">
>
> Nein, so kann das auch nicht funktionieren:
> In diesem Fall übergibst Du der Funktion _zwei_
> Parameter, und die erwartet nunmal nur _einen_.
>
> Die »quick & dirty«-Lösung besteht darin, die
> Funktion mehrfach aufzurufen (weiterhin mit der
> ID):
>
> <body onload="zeilenhoehe('box_1');
> zeilenhoehe('box_2'); zeilenhoehe('box_3');">
Funktioniert prima!
Danke Tobias! :-))
> Das ist natürlich unelegant -- erst recht, wenn
> Du zig Boxen hast; da wäre die Verwendung einer
> Klasse besser.
Stimmt, das habe ich ja auch schon versucht.
> Guck Dir nochmal die Seite an, die ich in meinem
> ersten Posting verlinkt habe:
Ja, habe ich gemacht, ist aber hoffnungslos.
Ich verstehe es einfach nicht, was zum einen an meinen unzureichenden Englischkenntnissen liegt, zum anderen daran, daß ich mit der Javascript-Terminologie noch nicht so vertraut bin.
Ich werde also vorläufig die unelegante Version benutzen.
Da ich nur 4 Boxen habe, finde ich das noch vertretbar. ;-)
Gruß
manya
Re: JS-Switch für eine Eigenschaft
Autor: T.Jung
Datum: 27.08.2010 19:27:40
> > Guck Dir nochmal die Seite an, die ich in meinem
> > ersten Posting verlinkt habe:
>
> Ja, habe ich gemacht, ist aber hoffnungslos. (...)
> Ich werde also vorläufig die unelegante Version
> benutzen.
> Da ich nur 4 Boxen habe, finde ich das noch
> vertretbar. ;-)
Okay, das ist sicherlich vertretbar. :-)
Weil ich mittlerweile aber _selbst_ neugierig geworden war, hab das mal mit Hilfe der Funktion getElementsByClass() versucht -- hier ist das Ergebnis:
http://tobiasjung.net/storage/zeilenhoehe_aendern.html
Eine Sache habe noch geändert:
Der Funktion zum Ändern der Zeilenhöhe übergebe ich nun _zwei_ Parameter; nämlich erstens wie gehabt die Klasse und zweitens die Viewport-Höhe, ab der eine line-height von 200% genommen werden soll (lt. Deinem Beispiel also 400).
Gruß,
Tobias
Re: JS-Switch für eine Eigenschaft
Autor: manya
Datum: 28.08.2010 13:44:20
> Weil ich mittlerweile aber _selbst_ neugierig
> geworden war,
schön, daß mein Problem für Dich interessant war. :-)
> hab das mal mit Hilfe der Funktion
> getElementsByClass() versucht -- hier ist das
> Ergebnis:
>
> http://tobiasjung.net/storage/zeilenhoehe_aendern.html
Danke, Dein Beispiel hat gleich Einzug in meine Bookmarks gefunden. :-)
Gruß
manya
Re: JS-Switch für eine Eigenschaft
Autor: Netinja
Datum: 30.08.2010 21:23:40
Guten Abend,
Ich hoffe, dass es erlaubt sich, sich hier in den Thread hineinzuhängen, denn ich habe eine ähnliche Frage ans Forum.
Ich habe mir gedacht, dass es vorteilhaft wäre, wenn bei kleiner Auflösung auch die Bilder einer Webseite kleiner würden. Deshalb habe ich 2 Ordner erstellt, in denen jeweils grosse und kleinere Bilder drin sind.
Bei einer kleinen Auflösung des Besuchers wechsele ich nun einfach im Pfad zum Bild diese Ordner aus.
Aber so einfach ist es leider doch nicht.
Das ist mein Ansatz:
<?php $verzeichnis = mittel ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.header {
width: 450px;
text-align: justify;
border: 2px solid green;
}
.header img { float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
clear: both;
height: 70px;
padding-left: 70px;
background-image: <?php echo "url($verzeichnis/stern.png)" ?>;
background-repeat: no-repeat;
border: 2px solid silver;
margin-top: 10px;
margin-bottom: 10px;
}
.footer {
width: 450px;
text-align: justify;
border: 2px solid green;
}
.footer img { float: right;
margin-left: 10px;
margin-bottom: 10px;
}
-->
</style>
</head>
<body>
<div class="header">
<img src="<?php echo "$verzeichnis/tel-green.png" ?>">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis </div>
<div class="content"> <strong>nur Blindtext</strong> </div>
<div class="footer">
<img src="<?php echo "$verzeichnis/tel-red.png" ?>">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis </div>
<div style="clear: both"></div>
</div>
</body>
</html>
Hier kann man es live sehen: ;-)
http://netinja.ne.funpic.de/ask/javascript-to-php/Untitled-3b-mittel.php
Jetzt müsste "nur noch" die Variable $verzeichnis von Javascript gefüllt werden, abhängig von der Auflösung des Besuchers. aber ich scheitere an dem "nur noch". :-((
Ich nehme ersatzweise mal deine Abfrage nach der Fensterhöhe anstatt nach der Auflösung, das ist leichter zum Testen.
Ich habe also in die oben gepostete Datei
<body onload="Bildgroesse()">
und das Script eingesetzt:
<script type="text/javascript">
var verzeichnis = "mittel";
function Bildgroesse()
{
if (window.innerHeight < 400 ||
document.documentElement.clientHeight < 400)
{
verzeichnis = "klein";
else verzeichnis = "gross";
alert("das Verzeichnis ist " + verzeichnis)
}
}
</script>
hier live:
http://netinja.ne.funpic.de/ask/javascript-to-php/Untitled-4.php
Das Bilderverzeichnis ist durch PHP mit "mittel" vorbelegt, soll aber nun durch Javascript in "klein" oder "gross" geändert werden. Ich weiss, dass sich die Javascript-Variable "verzeichnis" nicht einfach für PHP weiterverwenden lässt, habe jedoch leider keine Idee, wie ich das hinbekomme, und hoffe auf Hilfe.
LG
Netinja
[OT] (was: JS-Switch für eine Eigenschaft)
Autor: gaby
Datum: 01.09.2010 17:15:42
> Guten Abend,
Moin ;-)
Kannst Du bitte für Dein Problem einen eigenen Thread aufmachen (evtl andere headline).
Vielleicht hast Du dann größere Chancen.
(Ich kann leider im Moment nix testen, wo PHP dabei ist. Mein Rechner zu Hause ist zu 90% im Eimer, und hier im Büro habe ich keinen lokalen Server) :-(
Grüße
gaby
Re: [OT]
Autor: Netinja
Datum: 02.09.2010 11:07:27
> > Guten Abend,
>
> Moin ;-)
auch Moin ;-)
> Kannst Du bitte für Dein Problem einen eigenen
> Thread aufmachen (evtl andere headline).
das mache ich noch, will erst nochmal etwas ausprobieren.
LG
Netinja
Zeilenhöhe berechnen
Autor: manya
Datum: 19.10.2010 18:55:07
Hallo allerseits!
Ich möchte mein Script nun erweitern, sodaß ich bei verschiedenen viewport-Höhen unterschiedliche Zeilenhöhen bekomme. Um nicht mehrere if-Abfragen schreiben zu müssen, möchte ich die Zeilenhöhe in Abhängigkeit von der viewporthöhe berechnen. Ich habe also eine Variable "abstand" definiert, in der die berechnete Zeilenhöhe (viewporthöhe geteilt durch 4) gespeichert werden soll.
Aus irgendeinem Grund klappt das jedoch nicht.
Ich wäre Euch dankbar, wenn Ihr mir helfen könntet, meinen Code zu korrigieren.
Gruß
manya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>berechnen der Zeilenhöhe</title>
<style type="text/css">
.box,
#box,
.nix
{
border: 2px solid red;
line-height: 100%;
margin-bottom: 1em;
}
</style>
<script type="text/javascript">
function berechne_Zeilenhoehe(div)
var abstand = 100%;
{
if (window.innerHeight > 400 || document.documentElement.clientHeight > 400)
{
abstand = windows.innerHeight / 4;
document.write("berechnete Zeilenhöhe = " + abstand + "% + <BR>");
document.getElementsByTagName("div")[0].style.lineHeight = abstand + '%';
document.getElementsByTagName("div")[1].style.lineHeight = abstand + '%';
}
}
onresize="berechne_Zeilenhoehe('div')";
</script>
</head>
<body onload="berechne_Zeilenhoehe('div'); ">
<div class="nix">
Was passiert hier?<br>
Die neue Zeilenhöhe soll in der Variablen "abstand" gespeichert werden.<br>
Zunächst wird "abstand" auf 100% gesetzt.<br>
Bei einer Viewport-Höhe von mehr als 400 Pixeln wird die Zeilenhöhe neu berechnet. Sie beträgt:<br>
viewporthöhe(in px) dividiert durch 4.
</div>
<div class="box">
Weit hinten, hinter den Wortbergen, fernab der Länder
Vokalien und Konsonantien leben die Blindtexte.
Abgeschieden wohnen Sie in dem schönen Städtchen
Buchstabhausen an der Küste des Semantik, eines grossen
Sprachozeans. Ein kleines Bächlein namens Duden fliesst
durch ihren Ort und versorgt sie mit den nötigen
Regelialien. Es ist ein paradiesmatisches Land, in dem
einem gebratene Satzteile in den Mund fliegen.
</div>
</body>
</html>
Re: Zeilenhöhe berechnen
Autor: manya
Datum: 19.10.2010 19:21:20
Ich sehe gerade, daß ich die Klammern der Funktion falsch gesetzt habe. So soll es sein:
function berechne_Zeilenhoehe(div)
{
var abstand = 100;
if (window.innerHeight > 400 || document.documentElement.clientHeight > 400)
{
abstand = windows.innerHeight / 4;
document.getElementsByTagName("div")[0].style.lineHeight = abstand + '%';
document.getElementsByTagName("div")[1].style.lineHeight = abstand + '%';
}
onresize="berechne_Zeilenhoehe('div')";
}
Funktioniert aber leider trotzdem nicht. :-(
Re: Zeilenhöhe berechnen
Autor: T.Jung
Datum: 20.10.2010 12:13:44
> function berechne_Zeilenhoehe(div)
> {
> (...)
> onresize="berechne_Zeilenhoehe('div')";
> }
>
>
> Funktioniert aber leider trotzdem nicht. :-(
Erstens ist onresize ein Event-Handler, den kannst Du nicht einfach so »nackt« in ein JavaScript reinschreiben.
Zweitens würde das Script, selbst wenn vorgenanntes gehen würde, nicht wie gewünscht funktionieren, denn das »onresize« steckt ja in der Funktion berechne_Zeilenhoehe(), welche wiederum nur beim _Laden_ des Dokuments ausgeführt wird (<body onload="...">).
Anders gesagt: Die Funktion wird ohnehin nur _einmal_ ausgeführt und initialisiert keine dauerhafte Überwachung der Fenstergröße -- was ja notwendig wäre, um die gewünschte Aktion bei jeder Größenänderung durchzuführen.
Eine dauerhafte Überwachung der Fenstergröße wird z.B. auf diesen Seiten demonstriert:
http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm
http://www.mediaevent.de/javascript/onresize.html
HTH,
Tobias
Re: Zeilenhöhe berechnen
Autor: manya
Datum: 20.10.2010 17:40:59
> Eine dauerhafte Überwachung der Fenstergröße wird
> z.B. auf diesen Seiten demonstriert:
>
> http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm
>
> http://www.mediaevent.de/javascript/onresize.html
Danke für die Links.
Ich les' dann jetzt mal. ;-)
Gruß
manya
Re: Zeilenhöhe berechnen
Autor: Netinja
Datum: 21.10.2010 13:18:05
> Ich sehe gerade, daß ich die Klammern der
> Funktion falsch gesetzt habe. So soll es sein:
>
> function berechne_Zeilenhoehe(div)
> {
> var abstand = 100;
>
> if (window.innerHeight >
> 400 || document.documentElement.clientHeight > 400)
> {
> abstand = windows.innerHeight / 4;
>
> document.getElementsByTagName("div")[0].style.lineHeight
> = abstand + '%';
>
> document.getElementsByTagName("div")[1].style.lineHeight
> = abstand + '%';
> }
>
> onresize="berechne_Zeilenhoehe('div')";
> }
>
>
> Funktioniert aber leider trotzdem nicht. :-(
Kein Wunder!
> abstand = windows.innerHeight / 4;
Da war der Tippfehlerteufel am Werk, oder war es etwa ein freud'scher Versprecher, als du "windows" statt "window" geschrieben hast. :-D
LG
Netinja
Re: Zeilenhöhe berechnen
Autor: manya
Datum: 21.10.2010 18:17:13
> > abstand = windows.innerHeight / 4;
>
> Da war der Tippfehlerteufel am Werk, oder war es
> etwa ein freud'scher Versprecher, als du
> "windows" statt "window" geschrieben hast. :-D
OMG!
Welch ein blöder Fehler!
Daaanke! :-)
BTW, ich glaube, da war Freud am Werk. *g*
Gruß
manya
|
